<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <a-form :form="form" layout="vertical" style="padding: 12px;">
            <a-form-item style="display:none">
                <a-input v-decorator="['id']"/>
            </a-form-item>
            <a-row :gutter="24">
                <a-col :span="12">
                    <a-form-item :label="i18n('form.subject','主题')">
                        <a-input class="widthClass" :placeholder="i18n('form.subject','主题')"
                                 v-decorator="['subject', {rules: [{required: true, message: i18n('form.subject','主题','input')}]}]"/>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item :label="i18n('form.jumpUrl','跳转URL')">
                        <a-input class="widthClass" :placeholder="i18n('form.jumpUrl','跳转URL')"
                                 v-decorator="['url', {rules: [{required: true, message: i18n('form.jumpUrl','跳转URL','input')}]}]"
                                 :rows="4"/>
                    </a-form-item>
                </a-col>

                <a-col :span="12">
                    <a-form-item :label="i18n('form.seq','序号')">
                        <a-input-number class="widthClass" :min="0" :max="1000000" :placeholder="i18n('form.seq','序号')"
                                        v-decorator="['sn', {rules: [{required: false, message: i18n('form.seq','序号','input')}]}]"/>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item :label="i18n('form.icon','图标')">
                        <a-input class="widthClass"
                                 v-decorator="['icon',{rules: [{ required: true, message: i18n('form.icon','图标','select') }]}]"
                                 ref="iconInput"
                                 @click="iconselect()" :enterButton="i18n('form.selectIcon','选择图标')"
                                 :placeholder="i18n('form.selectIcon','选择图标')">

                            <a-icon slot="prefix" :type="icon"/>
                            <a-icon slot="suffix" type="close-circle" @click="emitEmpty"/>
                        </a-input>
                    </a-form-item>
                </a-col>

                <a-col :span="12">
                    <a-form-item :label="i18n('form.available','是否启用')">
                        <a-radio-group class="widthClass" v-model="mdl.enabled"
                                       v-decorator="['enabled', {rules: [{required: true, message: i18n('list.type','类型','select')}]}]">
                            <a-radio value="YES">{{ i18n('form.enable', '启用') }}</a-radio>
                            <a-radio value="NO">{{ i18n('form.disable', '禁用') }}</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item :label="i18n('form.setType','设置查询类型')">
                        <a-radio-group @change="sqlTypeChange" v-model="mdl.type"
                                       v-decorator="['type', {rules: [{required: true, message: i18n('form.setType','设置查询类型','select')}]}]">
                            <a-radio value="function">{{ i18n('form.methodGroovy', '调用方法（groovy语法）') }}</a-radio>
                            <a-radio value="sql">{{ i18n('form.sql', '调用sql语句') }}</a-radio>
                        </a-radio-group>

                    </a-form-item>
                </a-col>

                <a-col :span="12" v-show="isSql">
                    <a-form-item :label="i18n('form.dataSource','数据源')">
                        <a-input-group compact>
                            <a-input class="widthClass" v-model="mdl.dsAlias"
                                     :placeholder="i18n('form.sourceName','数据源名称')" @change="changDsAlias"
                                     v-decorator="['dsAlias', {rules: [{required: false, message: i18n('form.sourceName','数据源名称','select')}]}]"
                                     style="width: 70%"/>
                            <a-button @click="openDataSource" style="width: 10%">·&nbsp;·&nbsp;·</a-button>
                            <span v-show="dsAliasError"
                                  style="color: red">{{ i18n('msa.dateSourceTips', '请选择数据源！') }}</span>
                        </a-input-group>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <div v-show="isSql" class="conditionDiv">
                        <div class="minDiv">
                            <a-form-item :label="$ti18('rxForm.constantVar','常量')">
                                <a-select class="widthClass" style="width: 200px;" :options="constantField"
                                          @change="sqlInsertChange"></a-select>
                            </a-form-item>
                        </div>
                    </div>
                </a-col>

                <a-col :span="24">
                    <a-form-item :label="i18n('form.sqlOrMethod','SQL语句或方法')">
                        <div style="width: 100%;height: 150px;box-sizing: border-box;padding-right: 1px;">
                            <rx-monaco-editor
                                ref="monacoes"
                                :language="monacoeLanguage"
                                v-model="mdl.setting"
                                v-decorator="['setting', {rules: [{required: false, message: i18n('form.sqlOrMethod','SQL语句','write')}]}]">
                            </rx-monaco-editor>
                        </div>
                    </a-form-item>
                </a-col>

                <a-col :span="24">
                    <a-form-item :label="i18n('form.message','消息描述')">
                        <div style="width: 100%;height: 200px;box-sizing: border-box;padding-right: 1px;">
                            <rx-monaco-editor
                                :language="'html'"
                                v-model="mdl.description"
                                v-decorator="['description', {rules: [{required: false, message: i18n('form.message','消息描述','input')}]}]">
                            </rx-monaco-editor>
                        </div>
                    </a-form-item>
                </a-col>
            </a-row>

        </a-form>
        <iconSelector-modal ref="modal" @ok="setIcon" :icon="icon"/>
    </rx-dialog>
</template>
<script>
import InsRemindDefApi from '@/api/portal/core/insRemindDef';
import IconSelectorModal from '@/views/modules/system/core/IconSelectorModal.vue';
import {BaseForm, RxDialog, RxMonacoEditor, Dialog,JsConstant} from "@lowcode/jpaas-common-lib";

export default {
    name: 'InsRemindDefEdit',
    mixins: [BaseForm],
    components: {
        RxDialog, IconSelectorModal, RxMonacoEditor, Dialog
    },
    data() {
        return {
            isSql: false,
            dsAliasError: false,
            constantField: [{label: this.i18n('form.validConst', '可用常量'), value: ''}],
            icon: "",
            monacoeLanguage: "javascript",
        }
    },
    created() {
        this.loadConstants();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "InsRemindDef", key);
        },
        loadConstants() {
            InsRemindDefApi.getConstants().then(data => {
                this.constantField = this.constantField.concat(data.map(item => {
                    return {label: item.val, value: item.key}
                }));
            })
        },
        sqlInsertChange(value) {
            if (value) {
                this.$refs.monacoes.insertContent(value);
            }
        },
        openDataSource() {
            Dialog.openDataSourceDialog({
                curVm: this, widthHeight: ['1200px', '600px'],
                data: {appName: JsConstant.JPAAS_LOWCODE}
            }, function (self, data) {
                self.form.setFieldsValue({dsAlias: data.alias});
                self.dsAliasError = false;
            })
        },
        changDsAlias() {
            this.dsAliasError = false;
        },
        sqlTypeChange(e) {
            var val = e.target.value;
            this.mdl.setting = "";
            if (val == "function") {
                this.isSql = false;
                this.mdl.dsAlias = "";
            } else {
                this.isSql = true;
            }
        },
        iconselect() {
            this.$refs.modal.show()
        },
        setIcon(icon) {
            debugger;
            this.icon = icon.icon;

            this.form.setFieldsValue({'icon': icon.icon})
        },
        emitEmpty() {
            this.$refs.iconInput.focus()
            this.form.setFieldsValue({'icon': ''})
        },
        get(id) {
            return InsRemindDefApi.get(id);
        },
        validForm(values) {
            return true;
        },
        onload_(data) {
            if (typeof (data) == 'undefined') {
                this.mdl = Object.assign({
                    enabled: "YES",
                    type: "function",
                    setting: ""
                });
                this.form.setFieldsValue(this.mdl)
                return;
            }
            if (data.enabled) {
                this.form.setFieldsValue({enabled: data.enabled});
            }
            if ("sql" == data.type) {
                this.isSql = true;
                if (data.dsAlias) {
                    this.form.setFieldsValue({dsAlias: data.dsAlias});
                }
            }
        },
        save(values) {
            return InsRemindDefApi.save(values);
        }

    }
}
</script>
<style scoped>
.widthClass {
    width: 80%;
}
</style>
